import React from 'react';
import './index.less';
import SubTitle from '../subTitle';
import { MediaPlayer } from 'components';
import 'swiper/dist/css/swiper.min.css';
import Swiper from 'swiper/dist/js/swiper.min.js';
import VIDEO1 from 'images/course/video1.jpg';
import VIDEO2 from 'images/course/video2.jpg';
import VIDEO3 from 'images/course/video3.jpg';
import http from 'libs/http';
import _ from 'lodash'

export default class extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showVideo1: false,
      showVideo2: false,
      showVideo3: false,
      videoUrl1: null,
      videoUrl2: null,
      videoUrl3: null,
    };
  }

  componentDidMount() {
    this.swiper = new Swiper(this.swiperEl, {
      watchSlidesProgress: true,
      slidesPerView: 'auto',
      centeredSlides: true,
      loop: true,
      loopedSlides: 3,
      autoplay: true,
      pagination: {
        el: '.swiper-pagination',
        //clickable :true,
      },
      on: {
        progress(progress) {
          for (let i = 0; i < this.slides.length; i++) {
            const slide = this.slides.eq(i);
            const slideProgress = this.slides[i].progress;
            let modify = 1;
            if (Math.abs(slideProgress) > 1) {
              modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
            }
            const translate = `${slideProgress * modify * 260}px`;
            const scale = 1 - Math.abs(slideProgress) / 5;
            const zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
            slide.transform(`translateX(${translate}) scale(${scale})`);
            slide.css('zIndex', zIndex);
            slide.css('opacity', 1);
            if (Math.abs(slideProgress) > 3) {
              slide.css('opacity', 0);
            }
          }
        },
        click: (current) => {
          // const quearparam = current.target.name;
          const quearparam = _.get(current, 'target.name', '')
          console.log(current, quearparam)
          const num = quearparam.slice(-1);
          if (num === '1') {
            if (!this.state.videoUrl1) {
              http.get(`/student/common/getPublicByCode?code=${quearparam}`)
              .then(res => {
                this.setState({
                  videoUrl1: res.data.TV_URL,
                  showVideo1: true,
                });
              })
            } else {
              this.setState({
                showVideo1: true,
              });
            }
          } else if (num === '2') {
            if (!this.state.videoUrl2) {
              http.get(`/student/common/getPublicByCode?code=${quearparam}`)
              .then(res => {
                this.setState({
                  showVideo2: true,
                  videoUrl2: res.data.TV_URL,
                });
              })
            } else {
              this.setState({
                showVideo2: true,
              });
            }
          } else if (num === '3') {
            if (!this.state.videoUrl3) {
              http.get(`/student/common/getPublicByCode?code=${quearparam}`)
              .then(res => {
                this.setState({
                  showVideo3: true,
                  videoUrl3: res.data.TV_URL,
                });
              });
            } else {
              this.setState({
                showVideo3: true,
              });
            }
          }
          this.swiper.autoplay.stop();
        },
        setTransition(transition) {
          for (let i = 0; i < this.slides.length; i++) {
            const slide = this.slides.eq(i);
            slide.transition(transition);
          }
        },
      },
    });
  }

  handleCancle = () => {
    this.setState({
      showVideo1: false,
      showVideo2: false,
      showVideo3: false,
    }, () => this.swiper.autoplay.start());
  }

  render() {
    const {
      showVideo1, showVideo2, showVideo3, videoUrl1, videoUrl2, videoUrl3,
    } = this.state;
    // const { videoList } = this.props;
    return (
      <div className="video-list-container">
        <SubTitle title="编程录播课演示" color="#fff" lineColor="#fff" />
        <div id="certify">
          <div className="swiper-container" ref={self => this.swiperEl = self}>
            <div className="swiper-wrapper">
              <div className="swiper-slide">
                <img src={VIDEO1} alt="Scratch编程小科学家系列−牛顿定律自由落体" name="BIAN_CHENG_LUN_BO_1" />
              </div>
              <div className="swiper-slide">
                <img src={VIDEO2} alt="Scratch编程小科学家系列−水分子的形成运动" name="BIAN_CHENG_LUN_BO_2" />
              </div>
              <div className="swiper-slide">
                <img src={VIDEO3} alt="Scratch编程小创客系列−月球基地" name="BIAN_CHENG_LUN_BO_3" />
              </div>
            </div>
            <div className="swiper-pagination" ref={self => this.paginationEl = self} />
            {videoUrl1 && <MediaPlayer
              src={videoUrl1}
              show={showVideo1}
              title="Scratch编程小科学家系列−牛顿定律自由落体"
              onCancel={this.handleCancle}
            />}
            {videoUrl2 && <MediaPlayer
              src={videoUrl2}
              show={showVideo2}
              title="Scratch编程小科学家系列−水分子的形成运动"
              onCancel={this.handleCancle}
            />}
            {videoUrl3 && <MediaPlayer
              src={videoUrl3}
              show={showVideo3}
              title="Scratch编程小创客系列−月球基地"
              onCancel={this.handleCancle}
            />}
          </div>
        </div>
      </div>
    );
  }
}
